<!--
 * @Description: 菜单管理-新增|编辑 弹窗
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-22 09:27:50
 * @LastEditors: yxx
 * @LastEditTime: 2024-12-09 16:40:47
-->
<template>
  <div class="add-menu-dialog">
    <el-dialog title="菜单" v-model="isDialog" width="700px" :close-on-click-modal="false">
      <el-form :model="ruleForm" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <el-tree-select
                v-model="ruleForm.pid"
                :data="parentTree"
                node-key="id"
                check-strictly
                default-expand-all
                :render-after-expand="false"
                :expand-on-click-node="false"
                :check-on-click-node="true"
                :props="treeProps"
                style="width: 230px"
              >
                <template #default="{ data: { name } }"> {{ name }}</template>
              </el-tree-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单类型">
              <el-radio-group v-model="ruleForm.type">
                <el-radio :value="1">菜单</el-radio>
                <el-radio :value="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图标名称" v-if="ruleForm.type !== 2">
              <el-popover placement="bottom-start" :width="540" trigger="click">
                <template #reference>
                  <el-input
                    v-model="ruleForm.icon"
                    placeholder="点击选择图标"
                    @blur="showSelectIcon"
                    readonly
                    style="width: 230px"
                  >
                    <template #prefix>
                      <el-icon :size="16" color="#606266" v-if="ruleForm.icon">
                        <component :is="ruleForm.icon"></component>
                      </el-icon>
                    </template>
                  </el-input>
                </template>
                <icon-select ref="iconSelectRef" @icon-selected="iconSelected" :active-icon="ruleForm.icon" />
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称">
              <el-input v-model="ruleForm.name" placeholder="菜单名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序">
              <el-input-number v-model="ruleForm.sort" :min="1" :max="9999" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="路由名称" v-if="ruleForm.type !== 2">
              <el-input v-model="ruleForm.path" placeholder="路由名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件路径" v-if="ruleForm.type !== 2">
              <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否全屏" v-if="ruleForm.type !== 2">
              <el-radio-group v-model="ruleForm.isFull">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否固定" v-if="ruleForm.type !== 2">
              <el-radio-group v-model="ruleForm.isAffix">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="显示状态" v-if="ruleForm.type !== 2">
              <el-radio-group v-model="ruleForm.isHide">
                <el-radio :value="false">显示</el-radio>
                <el-radio :value="true">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存" v-if="ruleForm.type !== 2">
              <el-radio-group v-model="ruleForm.isKeepAlive">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="权限字符" v-if="ruleForm.type === 2">
              <el-input v-model="ruleForm.perms" placeholder="权限字符" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="ruleForm.remark" placeholder="备注" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from "element-plus"
import { menuTreeUpdateApi } from "@/api/modules/system"
import { SysReq } from "@/api/interface/system/request"
import IconSelect from "@/components/IconSelect/index.vue"

const emit = defineEmits(["refreshData"])

const isDialog = ref<boolean>(false)
const iconSelectRef = ref<InstanceType<typeof IconSelect>>()
const treeProps = {
  label: "name",
  value: "id"
}
const parentTree = ref<any[]>([])
const ruleForm = ref<SysReq.MenuUpdate>({
  id: undefined,
  name: "",
  pid: 0,
  sort: 0,
  type: 1,
  path: "",
  status: 1,
  component: "",
  perms: "",
  icon: "",
  remark: "",
  isHide: false,
  isFull: false,
  isAffix: false,
  isKeepAlive: true
})

/** 弹窗 打开 */
const handleOpen = () => {
  isDialog.value = true
}
/** 按钮 确定 */
const handleConfirm = async () => {
  await menuTreeUpdateApi(ruleForm.value)
  ElMessage.success("操作成功！")
  emit("refreshData")
  handleCancel()
}
/** 按钮 取消 */
const handleCancel = () => {
  resetForm()
  isDialog.value = false
}
/** 重置 表单 */
const resetForm = () => {
  ruleForm.value = {
    id: undefined,
    name: "",
    pid: undefined,
    sort: 0,
    type: 1,
    path: "",
    status: 1,
    component: "",
    perms: "",
    icon: "",
    remark: "",
    isHide: false,
    isFull: false,
    isAffix: false,
    isKeepAlive: true
  }
}
/** 选择图标 打开 */
const showSelectIcon = () => {
  // iconSelectRef.value?.reset()
}
/** 选择图标 确定 */
const iconSelected = (icon: string) => {
  ruleForm.value.icon = icon
}

defineExpose({ ruleForm, parentTree, handleOpen })
</script>

<style scoped lang="scss"></style>
